<template>
  <div class="daily">
    <div class="imgTop">
      <img
        src="http://p1.music.126.net/O7H_fQK99-nKaCamvUo1Gg==/109951167150608426.jpg"
        alt=""
      />
    </div>

    <div class="playlist">
      <div class="playlist_left">
        <van-icon name="play-circle" class="van1" />播放全部
      </div>
      <div class="playlist_right"><van-icon name="certificate" /></div>
    </div>

    <!-- 歌曲列表 -->
    <div class="singSong">
      <ul>
        <li
          v-for="(item, index) in everySong"
          :key="index"
          @click="handelGoSong(item.id)"
        >
          <div class="num">{{ index + 1 }}</div>
          <img :src="item.al.picUrl" alt="" class="img1" />
          <div class="Img_right">
            <div class="right_left">
              <p class="p1">{{ item.name }}</p>
              <p class="p2">
                <span>SQ</span>{{ item.ar[0].name }} - {{ item.al.name }}
              </p>
            </div>
            <div class="bofangdian">
              <span><van-icon name="play-circle-o" class="sp1" /></span>
              <span><van-icon name="ellipsis" class="sp2" /></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 返回 -->
    <van-icon name="arrow-left" class="arrow-left" @click="handleBack" />
    <van-icon name="share-o" class="share-o" />
    <p>稍等片刻，小易马上为你奉上优美音乐...</p>
  </div>
</template>

<script>
import axios from "axios";
import { setSong } from "../../utils/auth";
export default {
  data() {
    return {
      everySong: [],
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},

  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    async initSongs() {
      //获取每日推荐歌曲
      const res = await axios.get(
        "http://192.168.31.27:3000/recommend/songs?" + this.param,
        {
          withCredentials: true,
        }
      );
      this.everySong = res.data.data.dailySongs;
    },
    //前往播放歌曲页面
    handelGoSong(id) {
      this.$router.push("/playpage/" + id);
    },
  },
  created() {
    this.initSongs();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.daily {
  padding: 0 0 60px;
}
body {
  position: relative;
}
.imgTop {
  height: 170px;
}
.imgTop img {
  height: 170px;
  width: 100%;
}
.playlist {
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.playlist .playlist_left {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  padding: 0 5px;
}
.playlist .playlist_left .van1 {
  color: #cc5567;
  padding: 0 10px;
  font-size: 22px;
}
.playlist .playlist_right {
  font-size: 22px;
  text-align: center;
  line-height: 50px;
  padding: 0 10px;
}
/* 歌曲列表 */
.singSong li {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #f1f1f1;
}
.singSong .Img_right {
  display: flex;
  justify-content: space-between;
  flex: 1;
  /* padding: 16px 5px; */
  padding: 0px 5px;
}
.Img_right .right_left {
  padding: 8px 0;
}
.singSong .Img_right p {
  margin: 0;
  padding: 0;
  line-height: 20px;
}
.singSong .Img_right .p1 {
  font-size: 17px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Img_right .right_left {
  max-width: 200px;
}
.singSong .Img_right .p1 span {
  color: rgb(189, 45, 69);
  font-size: 15px;
  padding: 0 2px;
  margin-left: 5px;
  background: pink;
}
.singSong .Img_right .p2 span {
  color: rgb(189, 45, 69);
  font-size: 10px;
  padding: 1px 2px;
  margin-right: 5px;
  border: 0.5px solid rgb(189, 45, 69);
}
.singSong .Img_right .p2 {
  color: #acacac;
  margin-top: 8px;
  font-size: 14px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.singSong .img1 {
  padding: 5px 10px;
  width: 55px;
  height: 55px;
  border-radius: 15px;
}
.bofangdian {
  line-height: 35px;
  padding: 0 10px;
}
.bofangdian .sp1 {
  padding: 0 15px;
  font-size: 20px;
  color: #acacac;
}
.bofangdian .sp2 {
  color: #acacac;
  font-size: 18px;
}
/* 返回 */
.arrow-left {
  position: absolute;
  font-size: 22px;
  top: 10px;
  left: 10px;
  color: #e6d9d9;
}
.share-o {
  position: absolute;
  font-size: 22px;
  top: 10px;
  right: 10px;
  color: #e6d9d9;
}
.num {
  width: 40px;
  line-height: 70px;
  text-align: center;
  font-size: 18px;
  color: #b3b0b0;
}
</style>
